var tl;
var resizeTimerID = null;


function onResize(){
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function(){
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

function onLoad(){
    var eventSource = new Timeline.DefaultEventSource();
    
    var bandInfos = [Timeline.createBandInfo({
        eventSource: eventSource,
        width: "65%",
        intervalUnit: Timeline.DateTime.WEEK,
        intervalPixels: 50
    }), Timeline.createBandInfo({
        showEventText: false,
        trackHeight: 0.5,
        trackGap: 0.2,
        eventSource: eventSource,
        overview: true,
        width: "25%",
        intervalUnit: Timeline.DateTime.MONTH,
        intervalPixels: 100
    }), Timeline.createBandInfo({
        showEventText: false,
        trackHeight: 0.5,
        eventSource: eventSource,
        overview: true,
        trackGap: 0.2,
        width: "10%",
        intervalUnit: Timeline.DateTime.YEAR,
        intervalPixels: 200
    })];
    
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    bandInfos[2].syncWith = 0;
    bandInfos[2].highlight = true;
    
    var today = new Date().toLocaleString();
    
    var theme = Timeline.ClassicTheme.create();
    theme.event.label.width = 250; // px
    theme.event.bubble.width = 250;
    theme.event.bubble.height = 200;
    
    var theme_now = Timeline.ClassicTheme.create();
    for (var i = 0; i < bandInfos.length; i++) {
        bandInfos[i].decorators = [new Timeline.SpanHighlightDecorator({
            startDate: "Mar 29 2009 12:30:00 GMT-0600",
            endDate: "Jun 27 2009 13:00:00 GMT-0600",
            color: "#FFC080",
            opacity: 40,
            startLabel: "Q2 start",
            endLabel: "Q2 end",
            theme: theme
        }), new Timeline.PointHighlightDecorator({ // left band
            date: "Mar 29 2009 17:38:00 GMT-0600",
            color: "#FFC080",
            opacity: 50,
            theme: theme
        }), new Timeline.PointHighlightDecorator({ // right band
            date: "Jun 27 2009 13:00:00 GMT-0600",
            color: "#FFC080",
            opacity: 50,
            theme: theme
        }), new Timeline.PointHighlightDecorator({ // current timeline
            date: today,
            color: "green",
            opacity: 40,
            width: 2,
            theme: theme_now
        })];
    }
    
    tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
    tl.loadXML("timeline_xml.php?dummy=" + new Date().getTime(), function(xml, url){
        eventSource.loadXML(xml, url);
    });
    setupFilterHighlightControls(document.getElementById("controls"), tl, [0, 1], theme);
}
